<template>
  <img alt="Vue logo" src="../assets/logo.png">
  <div>{{ slogan }}</div>
  <div v-text="msg"></div>
  <div v-text="count"></div>
  <!-- v-text = innerText -->
  <div v-text="html"></div>
  <!-- v-html = innerHTML -->
  <div v-html="html"></div>
  <button type="button" @click="accumulation">你过来呀</button>
  <div v-once v-text="count"></div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      msg: '我爱你中国，亲爱的母亲',
      count: 10,
      html: '<a href="https://space.bilibili.com/480308139">李昊哲-小课</a>'
    }
  },
  methods:{
    accumulation(){
      this.count++
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
